<template>
    <div>
        <el-form-item label="伤病史">
            <el-button v-if="!shangbing" @click="addwound">新增</el-button>
            <div v-if="shangbing">
                <div class="sbsclass">
                    <el-select v-model="sbls.type" placeholder="请选择">
                        <el-option v-for="(item,index) in sbztlist" :key="index" :value="item.value"
                                   :label="item.label"></el-option>
                    </el-select>
                    <div class="sbs">
                        <el-button type="primary" v-if="sbls.id==0" @click="woundLogsadd2">新增</el-button>
                        <el-button type="success" v-else @click="woundLogsedit2">保存</el-button>
                        <el-button @click="quwound">取消</el-button>
                    </div>
                </div>
                <el-input class="mt20" placeholder="请输入伤病名称" v-model="sbls.name"></el-input>
                <el-input class="mt20" placeholder="请输入备注" v-model="sbls.remarks"></el-input>
            </div>
        </el-form-item>
        <el-table
                v-if="shangbinglist.length!=0"
                :data="shangbinglist"
                border
                style="width: 100%; margin-bottom: 20px;">
            <el-table-column
                    prop="name"
                    label="伤病名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="备注">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型">
                <template slot-scope="scope">
                    <span>{{scope.row.type|filterstype(sbztlist)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑
                    </el-button>
                    <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {mapActions} from 'vuex'

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                detailForm: {
                    name: '',
                    age: ''
                },
                shangbing: false,
                radio: '',
                options: '',
                optionsKC: '',
                optionsJQ: '',
                optionsFG: '',
                shangbinglist: [],
                sbls: {
                    "id": 0,
                    "name": "",
                    "playerId": this.$route.query.id,
                    "remarks": "",
                    "type": 0,
                },
                sbztlist: [{
                    label: '轻度',
                    value: 0
                }, {
                    label: '中度',
                    value: 1
                }, {
                    label: '重度',
                    value: 2
                }],
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'getPlayerDetail',
                'fetchSelectList',
                'editPlayerInfo',
                'woundLogsgetList',
                'woundLogsedit',
                'woundLogsget',
                'woundLogsadd',
            ]),

            onCancel() {
                this.$router.back()
            },
            addwound() {
                this.shangbing = true
                this.sbls = {
                    "id": 0,
                    "name": "",
                    "playerId": this.$route.query.id,
                    "remarks": "",
                    "type": 0,
                }
            },
            quwound() {
                this.shangbing = false
                this.sbls = {
                    "id": 0,
                    "name": "",
                    "playerId": this.$route.query.id,
                    "remarks": "",
                    "type": 0,
                }
            },
            // 删除病
            deleteClick(e) {
                var that = this;
                this.woundLogsedit({"id": e, 'status': '1'}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        that.getwoundLogsgetList()
                    }
                })
            },            // 编辑
            handleClick(e) {
                console.log(e);
                var that = this;
                this.shangbing = true
                that.sbls = {
                    id: e.id,
                    name: e.name,
                    playerId: e.playerId,
                    remarks: e.remarks,
                    type: e.type,
                }
            },
            // 增加伤病
            woundLogsadd2() {
                var that = this;
                this.sbls.id = 0
                this.woundLogsadd(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        })
                        this.shangbing = false
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },

            // 编辑伤病
            woundLogsedit2() {
                var that = this;
                this.woundLogsedit(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.shangbing = false
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },
            fetchDetail() {
                const id = this.id
                this.getPlayerDetail({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.detailForm = data
                    }
                })
            },

            getSelect() {
                this.fetchSelectList({type: 'FZ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },

            getSelectKC() {
                this.fetchSelectList({type: 'CT'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsKC = list || []
                    }
                })
            },

            getSelectJQ() {
                this.fetchSelectList({type: 'JQ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsJQ = list || []
                    }
                })
            },
            getwoundLogsgetList() {
                this.woundLogsgetList(
                    {"id": this.id}
                ).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.shangbinglist = list || []
                    }
                })
            },

            getSelectFG() {
                this.fetchSelectList({type: 'FG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsFG = list || []
                    }
                })
            },

            editDetail() {
                this.detailForm.age = Number(this.detailForm.age)
                this.editPlayerInfo(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    }
                })
            }
        },
        filters: {
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].value) {
                        return data[i].label
                    }
                }
            },
        },
        computed: {
            id() {
                return this.$route.query.id
            }
        },

        created() {
            this.fetchDetail()
            this.getSelect()
            this.getSelectKC()
            this.getSelectJQ()
            this.getSelectFG()
            this.getwoundLogsgetList()
        },

    }
</script>

<style scoped>
    .playerDetail {
        margin: 0 auto;
        margin-top: 100px;
        /*width: 1160px;*/
        background: #fff;
        padding: 10px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .sbsclass {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .sbsclass .sbs {
        margin-left: 20px;
    }


</style>
